<template>
	<view>
		
		<template v-if="step === 1">
			<div class="page-content flex-c" :style="{ height: screenHeight + 'px' }">
				<view class="content flex_center">
					<view class="cont">
						<!-- <view class="cont_bg"></view> -->
						<image class="cont_bg" :style="{ width: bgW + 'px' }" mode="heightFix"
							src="https://content.daylucky.cn/admin/image/yh0f7gj55gwuumahqj8le0mq.gif" />
						<view class="cont_bg1" :style="{ width: bg1W + 'px' }"></view>
					</view>
				</view>
				<!-- <view v-show="tipsText" class="tipV">{{ tipsText }}123</view> -->
				<view class="footer flex_b_c">
					<!-- 拍一拍 -->
					<image @click="onLink(1)" class="footer_btn"
						src="http://content.daylucky.cn/admin/image/xjt3augmzbu0wuteuknqw58p.png"></image>
					<!-- 传一传 -->
					<image @click="onLink(2)" class="footer_btn"
						src="http://content.daylucky.cn/admin/image/ff6bm7ry7erioq9daxzxoiuf.png"></image>
					<!-- 告诉我 -->
					<image @click="isShowTellMe = true" class="footer_btn tellme_btn"
						src="http://content.daylucky.cn/admin/image/kmta1vdqyz5wz7efiougtibv.png">
					</image>
				</view>
			</div>
		</template>
		<sweep v-if="step === 2" :step.sync="step" :bgW="bgW" :bg1W="bg1W"
			@on-success="content => (sweepContent = content, isShowMask = true)" />
		<mask :isShow.sync="isShowMask" :content="sweepContent" @on-fail="isShow = false, notCountTxt = ''" />
		<notCountMask :contTxt="notCountTxt" :isShow.sync="isShow" />
		<van-popup :show="isShowTellMe" @close="() => isShowTellMe = false" custom-style="background: transparent">
			<view class="tellMe_cont" @click="isShowTellMe = false">
				<view class="tellMe_title"></view>
				<view>尊嘟很抱歉，由于“woW告诉我”功能需要上传头像才能使用，并且该功能可提供的文字内容为实时更新，小程序暂不支持该功能，魔镜也有心无力呢。除了小程序以外，镜子其实还以其他形式存在，你可以在其他地方找到我并使用这个功能！
				</view>
			</view>
		</van-popup>
		<!-- 提示 -->
		<van-popup :show="isShowTip" custom-style="background: transparent">
			<view class="tip_cont">
				<image class="tip_close" @click="onCloseTips"
					src="http://content.daylucky.cn/admin/image/8vi4voevp9sxwqyjgyo4i3kq.png"></image>
				<view class="tip_title">woW！</view>
				<!-- 拍一拍 -->
				<view v-if="tipNum === 1" class="tip_txt pl-88 pr-74">万事万物都在爱你，点击使用“拍一拍”，神奇的魔镜会将万物的声音告诉你，希望你感受到镜子和万物的温柔。</view>
				<!-- 传一传 -->
				<view v-if="tipNum === 2" class="tip_txt pl-88 pr-74">我是神奇的魔镜，任何人在照镜子的时候都会露出真实的一面。点击使用“传一传”，无论是你还是TA，我都会告诉你真实的一切。
				</view>
				<view class="tip_desc">（魔镜不会采集任何特性数据处理信息）</view>
				<!-- 拍一拍 -->
				<image v-if="tipNum === 1" @click="onLinkChoose" class="tip_btn"
					src="http://content.daylucky.cn/admin/image/42klje1z434cujpdq2lfv4a8.png"></image>
				<!-- 传一传 -->
				<image v-if="tipNum === 2" @click="onLinkChoose" class="tip_btn"
					src="http://content.daylucky.cn/admin/image/9ys6wlv610zhjvm5vrc9nz9c.png"></image>
				<view class="flex_center tip_bottom">
					<image v-if="!tipCheck" @click="tipCheck = !tipCheck" class="tip_normal"
						src="http://content.daylucky.cn/admin/image/1zelxxe5x37t8gqg91ft8x6k.png"></image>
					<image v-else @click="tipCheck = !tipCheck" class="tip_active"
						src="http://content.daylucky.cn/admin/image/bf2cubobt4sz7lxrj3fp4ubv.png"></image>
					<image class="tip_guide" @click="tipCheck = !tipCheck"
						src="http://content.daylucky.cn/admin/image/fk6ehhsc7z4bcamhhfvn2uz9.png"></image>
				</view>
			</view>
		</van-popup>
		<!--  -->
	</view>
</template>
<script>
import onLogin from '@/utils/login'
import { getUserPerks } from '@/api'
import sweep from '@/components/sweep'
import mask from '@/components/mask'
import notCountMask from '@/components/notCountMask'
export default {
	components: { sweep, mask, notCountMask },
	name: 'index',
	data() {
		return {
			step: 1,
			tipNum: 1, // 1拍一拍 2 传一传
			tipCheck: false,
			isShowTip: false,
			isShowTellMe: false,
			isShow: false, // 拍一拍次数用尽
			isShowMask: false,
			notCountTxt: '',
			sweepContent: '', // 拍一拍内容
			bgW: 0,
			bg1W: 0,
			screenHeight: this.screenHeight,
		}
	},
	onShow() {
		if (!this.$storage.hasStorage('access_token')) {
			onLogin()
		}


	},
	onShareAppMessage() {
		return {
			title: '魔镜魔镜告诉我',
			path: '/pages/home/index',
			imageUrl: "",//自定义图片的地址
			success(res) {
			},
			fail(err) { console.log(err) }
		}
	},
	mounted() {
		this.getDomClientRect()

	},

	methods: {

		getDomClientRect() {
			this.$nextTick(() => {
				uni.createSelectorQuery().in(this).select('.cont_bg1').boundingClientRect((rect) => {
					this.bg1W = 629 / 1119 * rect.height
					console.log('元素高度为：' + rect.height, this.bg1W)
				}).exec()
				uni.createSelectorQuery().in(this).select('.cont_bg').boundingClientRect((rect) => {
					this.bgW = 123 / 253 * rect.height
					console.log('元素高度为：' + rect.height, this.bgW)
				}).exec()
				uni.createSelectorQuery().in(this).select('.page-content').boundingClientRect((rect) => {
					console.log('page-content元素高度为：' + rect.height)
				}).exec()
				uni.createSelectorQuery().in(this).select('.content').boundingClientRect((rect) => {
					console.log('content元素高度为：' + rect.height)
				}).exec()
				uni.createSelectorQuery().in(this).select('.cont').boundingClientRect((rect) => {
					console.log('cont元素高度为：' + rect.height)
				}).exec()
			})
		},
		// async fnGetUserPerks(perks_type) {
		// 	const { code, data } = await getUserPerks({ perks_type })
		// 	if (code === 200) {
		// 		return data.perks_status
		// 	}
		// },
		async onLink(perks_type) {
			this.tipNum = perks_type
			console.log(this.$storage.getStorage('tips' + perks_type), 'tips' + perks_type)
			if (!this.$storage.getStorage('tips' + perks_type)) {
				this.isShowTip = true
				return false
			}
			this.onLinkChoose(perks_type)
		},
		async onLinkChoose() {
			this.isShowTip = false
			let perks_type = this.tipNum
			if (this.tipCheck) {
				this.$storage.setStorage('tips' + this.tipNum, true)
			}
			const { code, data } = await getUserPerks({ perks_type })
			if (code === 1000) {
				if (data.perks_status) {
					console.log(data.perks_status, perks_type)
					if (perks_type === 1) {
						this.step = 2
					} else if (perks_type === 2) {
						uni.navigateTo({
							url: '/pages/send/index'
						});
					}
				} else {
					this.isShow = true
					this.notCountTxt = perks_type === 1 ? '不好意思，每天3次的“拍一拍”魔力用光光啦。明天恢复魔力后，可以再次使用该功能。不过说不定你可以在其他地方找到我。' : '“传一传”的魔法消耗好快啊，让镜子休息一下好不好？明天我就又会充满魔力了，或许你要去其他地方找到我，能获取更多的内容。'
				}
			}
		},

		onCloseTips() {
			if (this.tipCheck) {
				this.$storage.setStorage('tips' + this.tipNum, true)
			}
			this.tipCheck = false
			this.isShowTip = false
		}


	}
}
</script>
<style lang="scss">
.page-content {
	// width: 100%;
	// height: 100vh;
	position: fixed;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;

	.content {
		background: url('https://content.daylucky.cn/admin/image/zdbt5v95lvd6kcdov8xt0xvh.png') no-repeat left bottom/ 100% 100%;
		width: 100%;
		overflow: hidden;
		flex: 1;

		// display: flex;
		// height: calc(100vh - 186rpx - env(safe-area-inset-bottom));
		.cont {
			// width: 629rpx;
			// height: 1119rpx;
			width: 100%;
			height: 100%;
			position: relative;

			.cont_bg {
				display: block;
				position: absolute;
				// width: 410rpx;
				// height: 790rpx;
				left: 50%;
				top: 50%;
				transform: translate(-50%, -45%);
				height: 62%;
				width: auto;
				// background: url(https://content.daylucky.cn/admin/image/yh0f7gj55gwuumahqj8le0mq.gif) no-repeat left top/ cover;
				// aspect-ratio: 120 / 253;
				-webkit-clip-path: ellipse(41% 50% at 50% 50%);
				overflow: hidden;
				clip-path: ellipse(42% 50% at 50% 50%);
			}

			.cont_bg1 {
				position: absolute;
				background: url('https://content.daylucky.cn/admin/image/uhh6oxnhzxo7974p30xbyaqt.png') no-repeat top left/ cover;
				// width: 100%;
				// height: 100%;
				left: 50%;
				top: 50%;
				transform: translate(-50%, -48%);
				height: 82%;
				width: auto;
				// aspect-ratio: 629 / 1119;
			}
		}
	}

	.footer {
		width: 100%;
		// padding-bottom: constant(safe-area-inset-bottom);
		// padding-bottom: env(safe-area-inset-bottom);
		height: calc(192rpx + env(safe-area-inset-bottom));
		padding: 0 23rpx;
		padding-bottom: calc(34rpx + env(safe-area-inset-bottom));
		align-items: flex-end;
		background: url('https://content.daylucky.cn/admin/image/bxp37p4iptpwsftbmljr8csf.png') no-repeat left top/ cover;

		.footer_btn {
			width: 220rpx;
			height: 104rpx;

			&.tellme_btn {
				height: 114rpx;
			}
		}
	}
}

.tellMe_cont {
	background: url('http://content.daylucky.cn/admin/image/hw1eue622u57z1fr7ycpc7ay.png') no-repeat left top/ 572rpx 664rpx;
	width: 572rpx;
	height: 664rpx;
	padding-top: 86rpx;
	padding-left: 78rpx;
	padding-right: 56rpx;
	font-size: 32rpx;
	line-height: 46rpx;
	font-weight: 500;
	color: #000000;

	.tellMe_title {
		background: url(http://content.daylucky.cn/admin/image/ov8oj0r1yd381dfh8yv4c68b.png) no-repeat center / 138rpx 54rpx;
		margin: 0 auto 22rpx;
		width: 138rpx;
		height: 54rpx;
	}

}

.tip_cont {
	background: url(http://content.daylucky.cn/admin/image/vtvxjaw10q51aor9syabqsvc.png) no-repeat left top/ 598upx 834upx;
	padding-top: 170rpx;
	width: 598rpx;
	height: 834rpx;
	position: relative;
	font-size: 32rpx;
	font-weight: 500;
	color: #2A0F38;
	line-height: 46rpx;

	.tip_close {
		width: 88rpx;
		height: 88rpx;
		top: 60rpx;
		right: 42rpx;
		position: absolute;
	}

	.tip_title {
		height: 62rpx;
		font-size: 44rpx;
		font-weight: 600;
		text-align: center;
		color: #2A0F38;
		line-height: 62rpx;
		margin-bottom: 58rpx;
	}

	.tip_txt {
		min-height: 210rpx;
	}

	.tip_desc {
		height: 34rpx;
		font-size: 24rpx;
		font-weight: 600;
		color: #2A0F38;
		line-height: 34rpx;
		margin-top: 26rpx;
		padding-left: 80rpx;
	}

	.tip_btn {
		width: 244rpx;
		height: 80rpx;
		display: block;
		margin: 40rpx auto 0;
	}

	.tip_bottom {
		margin-top: 30rpx;

		.tip_normal,
		.tip_active {
			width: 32rpx;
			height: 36rpx;
			margin-right: 6rpx;
		}

		.tip_guide {
			width: 143rpx;
			height: 23rpx;
		}
	}
}
</style>


